/* =====================================================
   Bethy Coiff – Unified & Optimised CSS (v2025‑06‑07 patch‑b)
   Changements suite aux retours :
   1. Restauration de l’animation "ciseaux → flèche" (buttonn)
   2. Recentrage des sections « Nos Prestations », « Où nous trouver » & « Horaires »
   3. Grille services : 2 colonnes sur mobile (< 600 px) pour un alignement façon « dé à 6 »
   ===================================================== */

/* ---------------- Core tokens ---------------- */
:root{
  --c-primary:#a83b3b;--c-primary-dark:#8e2c2c;--c-secondary:#d9b6a3;
  --c-bg-light:#faf3f0;--c-bg-card:#fff;--c-text:#333;
  --radius:10px;--shadow-s:0 2px 5px rgba(0 0 0/.1);--shadow-m:0 4px 6px rgba(0 0 0/.1);--shadow-l:0 4px 15px rgba(0 0 0/.1);
  --transition:.3s ease;}
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;flex-direction:column;min-height:100vh;font-family:Georgia,serif;background:var(--c-bg-light);color:var(--c-text)}

/* ---------------- Banner ---------------- */
.banner{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--c-primary);color:#fff;padding:15px 30px;position:relative}
.logo-bethy{width:100px;position:absolute;left:30px;top:50%;transform:translateY(-50%)}
.text-content{text-align:center}
@media(max-width:768px){.logo-bethy{width:70px;left:15px}}

/* ---------------- Navbar ---------------- */
.navbar{background:var(--c-secondary);display:flex;justify-content:center;padding:10px 0;box-shadow:var(--shadow-m)}
.navbar ul{display:flex;gap:20px;list-style:none}
.navbar a{padding:8px 12px;border-radius:5px;font-weight:700;color:var(--c-text);text-decoration:none;transition:var(--transition)}
.navbar a:hover{background:var(--c-primary);color:#fff}
@media(max-width:768px){.navbar ul{gap:15px}.navbar a{padding:6px 10px;font-size:14px}}

/* ---------------- Section wrappers ---------------- */
section{text-align:center;padding:40px 20px}
.page-title{font:700 2.5rem 'Times New Roman',serif;color:var(--c-primary);margin:20px 0}
.service-note{font-size:.9rem;color:var(--c-primary);margin:15px 0}

/* « Nos Prestations » & génériques */
#services h2,#gallery h2,#location h2,#horaires h2{font:700 2.5rem 'Times New Roman',serif;color:var(--c-primary);margin-bottom:20px;text-align:center}
#services p,#location p,#horaires p{text-align:center}

/* ---------------- Service LIST (index) ---------------- */
.service-list{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.service-item{background:var(--c-bg-card);width:300px;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow-m);text-align:left}
.service-item h3{font:700 1.5rem Georgia,serif;color:var(--c-text);border-bottom:2px solid var(--c-primary);margin-bottom:10px;padding-bottom:5px}
.service-item p{color:#555;margin:5px 0}

/* ---------------- Gallery ---------------- */
#gallery{background:#f4e8e4}
.gallery{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
.gallery img{width:200px;border-radius:var(--radius);box-shadow:var(--shadow-m);object-fit:cover}

/* ---------------- Contact & footer ---------------- */
#contact{background:var(--c-bg-card)}
#contact .btn{display:inline-block;margin-top:10px;padding:10px 20px;background:var(--c-primary);color:#fff;border-radius:5px;font-weight:700;transition:var(--transition)}
#contact .btn:hover{background:var(--c-primary-dark)}
footer{background:#333;color:#fff;text-align:center;padding:10px 0;margin-top:auto;width:100%}

/* ---------------- Services PAGE ---------------- */
#people-count{margin:20px 0;font-weight:700}
#numPeople{width:60px;padding:5px;font-size:16px;border:2px solid #ccc;border-radius:8px;text-align:center}

.person-service{background:var(--c-bg-card);padding:15px;margin-bottom:15px;border-radius:var(--radius);box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:10px}
.person-service h4{font-size:18px;color:var(--c-text);text-align:center}
.service-options{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

.hair-length-select,.service-type-select{padding:10px;border:1px solid #ccc;border-radius:8px;font-size:14px;width:100%;max-width:200px}

/* ----- Service cards grid ----- */
.services-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;justify-items:center;margin-top:20px}
@media(max-width:600px){.services-list{grid-template-columns:repeat(2,1fr)}}
.service-card{background:var(--c-bg-card);border:2px solid #ccc;border-radius:var(--radius);box-shadow:var(--shadow-s);padding:15px;text-align:center;cursor:pointer;transition:var(--transition)}
.service-card:hover{border-color:var(--c-primary)}
.service-card.selected{border-color:var(--c-primary);background:#f9ece8}
.service-card-title{font-size:1rem;color:var(--c-text);margin-bottom:8px}
.service-card-price{font-weight:700;color:#666;margin-bottom:15px;font-size:.9rem}
.select-button{background:var(--c-primary);color:#fff;border:none;border-radius:5px;padding:6px 12px;font-size:.9rem;cursor:pointer;transition:var(--transition)}
.select-button:hover{background:var(--c-primary-dark)}

/* ----- Recap bloc... (idem) (inchangé) ----- */
#recap{max-width:400px;margin:30px auto;padding:20px;background:var(--c-bg-card);border:1px solid #ccc;border-radius:var(--radius);box-shadow:var(--shadow-m);text-align:center}
#recap h3{font-size:1.5rem;color:var(--c-primary);margin-bottom:10px}
#recap ul{list-style:none;text-align:left}
#recap p{font-size:1.2rem;font-weight:700;margin-top:10px}
#proposeAppointment{margin-top:20px;padding:10px 20px;background:var(--c-primary);color:#fff;border:none;border-radius:5px;cursor:pointer;transition:var(--transition)}
#proposeAppointment:hover{background:var(--c-primary-dark)}

/* ----- Finaliser page recap  (inchangé) ----- */
#finalibody{background:#fef7f4;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--c-text)}
#finali{background:var(--c-primary);color:#fff;text-align:center;box-shadow:var(--shadow-s)}
#finalih1{font-size:2.5rem;font-weight:700;margin:0}
#recapServices{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:1200px;margin:40px auto;padding:20px;background:var(--c-bg-card);border-radius:var(--radius);box-shadow:var(--shadow-l)}
.person-block{background:#fefaf7;padding:20px;width:45%;border-radius:var(--radius);border-left:5px solid var(--c-primary);box-shadow:0 2px 8px rgba(0 0 0/.05)}
.person-block h3{color:var(--c-primary);margin-bottom:10px;font-size:1.4rem}
@media(max-width:768px){.person-block{width:100%}}
.total-price{font-weight:700;font-size:1.2rem;color:var(--c-primary);margin-top:10px}

/* ----- Contact form / inputs  (inchangé) ----- */
#contactInfo{max-width:1200px;margin:40px auto;padding:30px;background:var(--c-bg-card);border-radius:calc(var(--radius)+5px);box-shadow:var(--shadow-l);display:flex;flex-direction:column;gap:20px}
.flex-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.flex-item{flex:1;min-width:48%;max-width:48%;display:flex;flex-direction:column;gap:10px}
@media(max-width:768px){.flex-container{flex-direction:column}.flex-item{min-width:100%;max-width:100%}}
.input-style,.phone-input{width:100%;padding:10px;border:2px solid var(--c-primary);border-radius:25px;margin-bottom:15px}
button,.custom-file-upload,#contactInfo button{background:var(--c-primary);color:#fff;border:none;padding:10px 20px;font-size:1rem;border-radius:5px;cursor:pointer;transition:var(--transition)}
button:hover,.custom-file-upload:hover,#contactInfo button:hover{background:var(--c-primary-dark)}

/* ----- Circular "Retour" button (scissors → arrow) ----- */
.buttonn{cursor:pointer;border:none;background:#B23B3B;color:#fff;width:100px;height:100px;border-radius:50%;display:grid;place-content:center;font-weight:600;overflow:hidden;position:relative;transition:background .3s,transform .2s}
.buttonn:hover{background:#8A2B2B;transform:scale(1.05)}
.buttonn__circle{position:relative;width:40px;height:40px;background:#fff;color:var(--c-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.buttonn__icon{transition:transform .3s ease-in-out,color .2s}
.buttonn__icon--copy{position:absolute;transform:translate(-150%,150%);color:var(--c-primary)}
.buttonn:hover .buttonn__icon:first-child{transform:translate(150%,-150%)}
.buttonn:hover .buttonn__icon--copy{transform:translate(0)}
.buttonn__text{position:absolute;inset:0;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;animation:text-rotation 15s linear infinite;color:#fff}
.buttonn__text span{position:absolute;inset:7px;transform:rotate(calc(19deg * var(--index)))}
@keyframes text-rotation{to{transform:rotate(360deg)}}

/* ----- Carousel / zoom (inchangé) ----- */
.carousel-container{position:relative;max-width:800px;margin:auto;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-m)}
.carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;cursor:grab;text-align:left}
.carousel::-webkit-scrollbar{display:none}
.carousel img{width:25%;border-radius:var(--radius);object-fit:cover;flex-shrink:0}
.zoom-overlay{position:fixed;inset:0;background:rgba(0 0 0/.8);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:var(--transition);z-index:1000}
.zoom-overlay.visible{visibility:visible;opacity:1}
.zoom-overlay img{max-width:90%;max-height:90%;border-radius:var(--radius);cursor:pointer}

/* ========== SLOT-TABLE RÉSERVATION (vFinal Planity Desktop/Mobile) ========== */

.slot-wrapper{
  background:var(--c-bg-card);
  padding:20px;border-radius:var(--radius);
  box-shadow:var(--shadow-s);max-width:100%;overflow:hidden;
  margin-bottom: 25px;
}

/* NAVIGATION */
.slot-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:16px;
}
.slot-nav button{
  background:none;border:none;font-size:2rem;
  color:var(--c-primary);cursor:pointer;transition:.2s;font-weight:700;padding:2px 10px;
}
.slot-nav button:disabled{opacity:.3;cursor:not-allowed;}
#weekLabel{font-size:1.15rem;font-weight:700;color:var(--c-primary);flex:1;text-align:center;}

/* --- TABLEAU DESKTOP : plusieurs jours côte à côte --- */
.slot-table{
  display: grid;
  grid-auto-flow: column;
  gap: 28px;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: 10px;
  width: 100%;
}

/* Colonne jour desktop */
.slot-col{
  background: #f9f3f2;
  border-radius: var(--radius);
  padding: 14px 0 18px 0;
  min-width: 240px;
  max-width: 290px;
  border:1.5px solid #f3d9d4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 9px #e4b7b340;
  transition: box-shadow .2s;
}
.slot-header{
  font-weight:700;text-align:center;color:var(--c-primary);
  font-size:1.08rem;margin-bottom:12px;background:transparent;
  cursor:pointer;user-select:none;padding-bottom:2px;
  border-radius: 9px 9px 0 0;
}

/* Grille de créneaux : 2x2 dans chaque colonne */
.slot-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90%;
  margin: 0 auto;
}
.slot-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.slot-btn {
  flex: 1 1 0;
  background: #fff;
  border: 2px solid #e7d7d4;
  border-radius: 12px;
  color: var(--c-primary);
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 0;
  margin: 0;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  min-width: 86px;
  max-width: 125px;
}
.slot-btn.selected {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.slot-btn-empty {
  visibility: hidden;
}

/* ----------- MOBILE ------------ */
@media (max-width: 700px) {
  .slot-table{
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-x:unset;
    padding-bottom:0;
  }
  .slot-col {
    max-width: 96vw;
    min-width: 0;
    width: 100%;
    padding: 0 0 10px 0;
    border:none;
    border-bottom:1.5px solid #e7d4ce;
    border-radius: var(--radius) var(--radius) 0 0;
    background:#f7eeeb;
    box-shadow: 0 2px 8px #e4b7b326;
    margin: 0 auto;
  }
  .slot-header{
    font-size:1.15rem;background: #f2e7e3;color: var(--c-primary);
    border-radius:10px 10px 0 0;padding:13px 0;margin-bottom:0;text-align:center;width:100%;
  }
  .slot-col .slot-grid { display: none;}
  .slot-col.open .slot-grid { display: flex;}
  .slot-col:not(.open) { box-shadow: none;}
  .slot-row{
    justify-content: center;
    gap: 10px;
  }
  .slot-btn{
    min-width: 39vw; max-width: 44vw;
    font-size: 1rem; padding: 13px 0;
    margin: 0;
  }
}

/* ---------------- END ---------------- */